<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>限时购</title>
	<link rel="stylesheet" href="./css/common.css">
	<link rel="stylesheet" href="./css/component.css">
	<style>
		.title1 {

		}
		.title2 {
			font-size: 26px;
			font-weight: 500;
		}
		.line-20 {
			width: 20px;
			height: 2px;
			background-color: #61594b;
			margin: 1em auto;
		}
		.font14 {
			font-size: 14px;
		}
		.font16 {
			font-size: 16px;
		}
		.ellipsis {
			white-space: nowrap;
			overflow:hidden;
			text-overflow: ellipsis;
		}
		.btn1 {
			padding: .5em 1.5em;
			border-radius: 1em;
			background-color: #a7936e;
			color:#ffffff;
			display: inline;
			cursor: pointer;
		}

		.xsg {
			background-color: #f4f0ea;
			padding: 60px 0;
		}
		.wrapper {
			width: 1090px;
			margin: 0 auto;
		}
		.xsg-top {
			margin-bottom: 1em;
		}
		.xsg-top > * {
			height: 30px;
			line-height: 30px;
		}
		.xsg-top > h1 {
			font-size: 26px;
			font-weight: 700;
			float: left;
		}
		.xsg-top > p {
			text-align: right;
		}
		.xsg-content {

		}
		.xsg-content > .lt{
			box-sizing: border-box;
			padding-top: 60px;
			width: 225px;
			height: 380px;
			float: left;
			background: url(./images/bg.jpg) no-repeat center;
			background-size: cover;
			text-align: center;
		}
		.xsg-content > .lt .times {
			margin: 20px auto 50px;
			width: 148px;
		}
		.xsg-content > .lt .times::after {
			content: "";
			display: block;
			clear: both;
		}
		/*148* 40*3 + 14*2 */
		.xsg-content > .lt .times>li {
			float: left;
			width: 40px;
			height: 40px;
			background-color: #61594b;
			margin-right: 14px;
			border-radius: 2px;
			color: #ffffff;
			line-height: 40px;
			position: relative;
		}
		.xsg-content > .lt .times>li:last-child {
			margin-right: 0;
		}
		.xsg-content > .lt .times>li span {
			position: absolute;
			right: -14px;
			width: 14px;
			color: #61594b;
		}
		.xsg-content > .rt{
			box-sizing: border-box;
			height: 380px;
			margin-left: 224px;
			width: 866px;
			border-top:1px solid #ccc;
			cursor: pointer;
		}
		/*866*/
		.xsg-content > .rt > li {
			box-sizing: border-box;
			float: left;
			width: 432.5px;
			height: 190px;
			border-right:1px solid #ccc;
			border-bottom:1px solid #ccc;
		}
		.xsg-content > .rt > li >.item-picture{
			width: 190px;
			height: 100%;
			float: left;
		}
		.xsg-content > .rt img {
			width: 100%;
			transition: transform 1s;
		}
		.xsg-content .item-picture:hover img {
			transform:scale(1.1);
		}
		.xsg-content > .rt > li >.item-info {
			margin-left: 190px;
			height: 100%;
			padding:1em;
		}
		.xsg-content > .rt .item-info > * {
			margin: .2em 0;
		}
	</style>
</head>
<body>
	<div class="container">
		<!-- ... -->
		<!-- 限时购 -->
		<div class="xsg">
			<div class="wrapper">
				<!-- 限时购头部 -->
				<div class="xsg-top">
					<h1>限时购</h1>
					<p><a href="#">更多抢购</a></p>
				</div>
				<!-- 限时购头部结束 -->
				<!-- 限时购体部 -->
				<div class="xsg-content">
					<div class="lt">
						<h1 class="title2">18点场</h1>
						<div class="line-20"></div>
						<p class="font16">距离结束还有</p>
						<ul class="times">
							<li>14 <span>:</span></li>
							<li>2 <span>:</span></li>
							<li>3</li>
						</ul>
						<div class="btn1">查看全部 &gt; </div>
					</div>
					<ul class="rt">
						<li>
							<div class="item-picture">
								<img src="./images/xs1.png" alt="">
							</div>
							<div class="item-info">
								<div class="font16 ellipsis">网易制造太空舱,网易制造太空舱,网易制造太空舱</div>
								<p>3D环绕音响</p>
								<ul>
									<li>
										<div class="progress">
											<div class="progress-bar"></div>
										</div>
									</li>
									<li>还剩216件</li>
								</ul>
							</div>
						</li>
						<li>
							<div class="item-picture">
								<img src="./images/xs2.png" alt="">
							</div>
							<div class="item-info">
								<div class="font16 ellipsis">网易制造太空舱,网易制造太空舱,网易制造太空舱</div>
								<p>3D环绕音响</p>
								<ul>
									<li>
										<div class="progress">
											<div class="progress-bar"></div>
										</div>
									</li>
									<li>还剩216件</li>
								</ul>
							</div>
						</li>
						<li>
							<div class="item-picture">
								<img src="./images/xs3.png" alt="">
							</div>
							<div class="item-info">
								<div class="font16 ellipsis">网易制造太空舱,网易制造太空舱,网易制造太空舱</div>
								<p>3D环绕音响</p>
								<ul>
									<li>
										<div class="progress">
											<div class="progress-bar"></div>
										</div>
									</li>
									<li>还剩216件</li>
								</ul>
							</div>
						</li>
						<li>
							<div class="item-picture">
								<img src="./images/xs2.png" alt="">
							</div>
							<div class="item-info">
								<div class="font16 ellipsis">网易制造太空舱,网易制造太空舱,网易制造太空舱</div>
								<p>3D环绕音响</p>
								<ul>
									<li>
										<div class="progress">
											<div class="progress-bar"></div>
										</div>
									</li>
									<li>还剩216件</li>
								</ul>
							</div>
						</li>
					</ul>
				</div>
				<!-- 限时购体部结束 -->
			</div>
		</div>
		<!-- ... -->
	</div>
</body>
</html>